<template>
    <div>
        <div>
            <Measure
                    :draw-line-map="drawLineMap"
                    :draw-area-map="drawAreaMap"
                    :clear-measure-map="clearMeasureMap"
                    style="float: left;margin-left: 8px"
            ></Measure>
        </div>
        <div id="map" ref="map"></div>
    </div>

</template>

<script>
    import {Map, View} from "ol";
    import {Tile as TileLayer, Vector as VectorLayer} from "ol/layer";
    import {XYZ, Vector as VectorSource} from "ol/source";
    import {fromLonLat} from "ol/proj";
    import Measure from "./AppMeasureComponent.vue"

    export default {
        name: "AppMeasure",
        components: {
            Measure,
        },
        data() {
            return {
                drawLineMap: {},
                drawAreaMap: {},
                clearMeasureMap: {},

                map: null,
            };
        },
        computed: {},
        mounted() {
            this.createMap();
        },
        methods: {
            createMap() {
                // 创建ArcGIS World Street Map图层
                const arcGISLayer = new TileLayer({
                    source: new XYZ({
                        url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
                    })
                });

                // 创建矢量图层
                const vector = new VectorLayer({
                    source: new VectorSource()
                });

                // 创建地图容器
                this.map = new Map({
                    target: this.$refs.map,
                    layers: [arcGISLayer, vector],
                    view: new View({
                        center: fromLonLat([120, 30]),
                        zoom: 8
                    })
                });

                this.drawLineMap = this.map
            },
        },
    };
</script>
<style lang="scss" scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 40px;
        left: 0;
    }
</style>
